<script src="../../../config/prod.env.js"></script>
<template>
	<div id="recharge" class="same-change-oldstyle">
		<!-- <div class="topBreadcrumb">
			<span>当前位置：</span>
			<el-breadcrumb separator-class="el-icon-arrow-right">
				<el-breadcrumb-item>设置</el-breadcrumb-item>
				<el-breadcrumb-item :to="{ path: '/rechargemanage' }">充值账户管理</el-breadcrumb-item>
				<el-breadcrumb-item>充值</el-breadcrumb-item>
			</el-breadcrumb>
		</div> -->
		<div class="same-head-box">
			<div class="saem-seat-box">
				<div class="saem-seat-left">
					<span>当前位置：</span>
					<el-breadcrumb separator-class="el-icon-arrow-right">
						<el-breadcrumb-item>设置</el-breadcrumb-item>
						<el-breadcrumb-item :to="{ path: '/rechargemanage' }">充值账户管理</el-breadcrumb-item>
						<el-breadcrumb-item>充值</el-breadcrumb-item>
					</el-breadcrumb>
				</div>
				<div class="saem-seat-right">
					<button class="same-search-btns same-search-export" @click="RefreshFun">刷新</button>
					<button class="same-search-btns" @click="returnBack">返回</button>
				</div>
			</div>
		</div>
		<div class="rechargewrap">


			<div class="withdraw-card">
				<div class="withdraw-cell">
					<span>充值卡账户余额(元)</span>
					<span>{{userinfo.account_recharge_balance}}</span>
				</div>
				<div class="withdraw-record-btn" @click="navWithdrawRecord()">
					<i class="el-icon-money"></i>
					提现记录
				</div>
			</div>

			<div class="row-title">
				<i class="el-icon-coin"></i>充值金额
			</div>

			<div class="radio-cell">
				<el-radio-group v-model="money">
					<el-radio @change="amount($event,index,item)" class="radio-child" v-for="(item,index) in moneyConf" :key='index' :label="index" border>{{item}}元
					</el-radio>
					<div @click="amount($event,-1,0)" class="radio-child">
						<el-input type="number" placeholder="自定义金额" v-model="inputMoney" @input="inputChange">
						</el-input>
					</div>

				</el-radio-group>

			</div>

			<div class="row-title">
				<i class="el-icon-wallet"></i>支付方式
			</div>
			<div class="user-radio-cell">
				<el-radio-group v-model="pay_type">
					<el-radio class="user-radio" label="1" border>
						<img src="../../../static/images/pay-logo-wechat.png" />
					</el-radio>
					<el-radio disabled class="user-radio" label="2" border>
						<img src="../../../static/images/pay-logo-alipay.png" />
					</el-radio>
				</el-radio-group>
			</div>


			<!-- <p class="curbalance">当前充值卡账户余额:<span>{{userinfo.account_recharge_balance}}</span>元</p> -->

			<!-- <h4 class="four">选择支付方式</h4>
			<div class="Paymentmethod">
				<div class="methoditem cur" @click="type($event,1)">
					<img src="../../../static/images/wx.png" />
					<img src="../../../static/images/wxicom.png" />
				</div>
			
			</div>
			<h4 class="four">选择充值金额</h4>
			<div class="rechargeamount">
				<div v-for="(item,index) in moneyConf" :key='index' class="amountitem " :class="index==money?'itnon':''"
					@click="amount($event,index,item)">{{item}}元</div>
				<div class="amountBox" style="width:23%" :class="-1==money?'itnon':''" @click="amount($event,-1,0)">
					<el-input size="medium" type="text" placeholder="请输入自定义充值金额" style="width: 100%;height:50px"
						v-model="inputMoney" @input="inputChange" maxlength="9"></el-input>
				</div>
			</div> -->
			<el-button class="pay-btn" type="primary"  @click="pay">去支付</el-button>
		</div>
		<!--弹窗-->
		<div class="Popup" v-show="success">
			<div class="poushow">
				<samp @click="closep" style="cursor: pointer;">×</samp>
				<img :src="imgPay" />
				<div>充值金额:{{rechargeMoney}} </div>
				<span>仅需支付手续费: ¥{{pay_money}}</span>
				<div class="titlemssg"><img :src="t_icon">{{payWay}}</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'recharge',
		data: function () {
			return {
				moneyConf: [],
				pay_type: '1',
				money: '1',
				flag: true,
				success: false,
				payWay: '微信支付',
				imgPay: '',
				pay_money: 0,
				t_icon: '../../../static/images/wx.png',
				userinfo: [],
				intval: '',
				rechargeMoney: '',
				inputMoney: '',//充值金额
			}
		},
		inject: ["reload"],
		methods: {
			RefreshFun() {
				// 调用reload方法，刷新整个页面
				this.reload();
			},
			//返回
			returnBack() {
				this.$router.back(-1);
			},
			inputChange(e) {
				// console.log('输入的金额',e)
				this.money = -1;
			},
			//选择充值金额
			amount: function (e, index, item) {
				var obj = e.target;
				this.money = index;
				this.pay_money = item;
				this.rechargeMoney = item;
				// if(this.userinfo.is_self == 1){
				//     this.pay_money = item*0.05;
				// }
				// $(obj).addClass('itnon').siblings().removeClass('itnon');
			},
			type(e, type) {
				console.log(111)
				this.pay_type = type;
			},
			closep() {
				this.success = false;
				clearInterval(this.intval);
			},
			//获取合伙人信息
			getPartner() {
				var that = this;
				that.$post({
					url: 'Partner/Setup/get_partner',
					data: {

					},
					success: function (data) {
						that.userinfo = data.data;
					}

				})
			},
			//获取支付金额配置
			money_config() {
				var that = this;
				that.$post({
					url: "Partner/Users/money_conf",
					data: {},
					success: function (data) {
						that.moneyConf = data.data;
						that.pay_money = data.data[1];
						that.rechargeMoney = data.data[1];
						//   if(that.userinfo.is_self == '1'){
						//       that.pay_money = data.data[1]*0.05;
						//   }
					}
				})
			},
			//支付
			pay() {
				var that = this;
				if (that.money == -1) {
					that.rechargeMoney = that.inputMoney;
					if (that.inputMoney == '' || that.inputMoney == 0 || that.inputMoney == null) {
						that.$message.error('请输入充值金额');
						return false;
					}
				}
				if (!that.flag) {
					return false;
				}
				// console.log('结果',that.pay_money,that.money,that.rechargeMoney)
				that.flag = false;
				that.$post({
					url: "Partner/Users/par_recharge",
					data: {
						pay_type: that.pay_type,
						money: that.rechargeMoney,
					},
					success: function (data) {
						that.flag = true;
						if (data.code == 1000) {
							if (that.pay_type == 1) {
								that.success = true;
								that.imgPay = data.data.url;
								that.payWay = '微信支付';
								that.t_icon = '../../../static/images/wx.png';

								that.isWxPay(data.data.order_sn);
								that.pay_money = data.data.pay_money;
							} else if (that.pay_type == 2) {
								location.href = data.data;
							}
						} else if (data.code == 2000) {
							that.$message.success(data.message);
						} else {
							that.$message.error(data.message);
						}
					}
				})
			},
			//获取合伙人信息
			// getPartner(){
			// 	var that = this;
			// 	that.$post({
			// 		url:'Partner/Setup/get_partner',
			// 		data:{
			//
			// 		},
			// 		success:function(data){
			// 			that.userinfo = data.data;
			//         that.money_config();
			// 		}
			//
			// 	})
			// },
			//查询微信是否支付
			isWxPay(sn) {
				var that = this;
				that.intval = setInterval(function () {
					that.$post({
						url: 'Partner/Users/select_wx_pay',
						data: {
							order_sn: sn
						},
						success: function (data) {
							if (data.code == 1000) {
								clearInterval(that.intval);
								that.success = false;
								that.$message({
									message: '微信支付成功',
									type: 'success'
								});
								that.getPartner();
							}
						}

					})
				}, 1000);
			},

		},
		mounted() {
			//选择支付方式
			$('.methoditem').click(function () {
				$(this).addClass('cur').siblings().removeClass('cur');
			})
		},
		watch: {

		},
		created() {
			this.getPartner();
			this.money_config();
			this.getPartner();
		}
	}
</script>

<style>
	#recharge .rechargewrap {
		padding: 0 40px;
	}

	#recharge .rechargewrap .Paymentmethod {
		display: flex;
	}

	#recharge .rechargewrap .curbalance {
		padding-top: 20px;
	}

	#recharge .rechargewrap .curbalance span {
		color: #bc1b21;
		padding: 0 5px;
	}

	#recharge .rechargewrap .Paymentmethod .methoditem {
		width: 240px;
		height: 120px;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		border: 1px solid #323333;
		color: #323333;
		margin-right: 30px;
	}

	#recharge .rechargewrap .Paymentmethod .methoditem img:first-child {
		margin-right: 10px;
	}

	#recharge .rechargewrap .rechargeamount {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
		width: 60%;
	}

	#recharge .rechargeamount .el-input--small .el-input__inner {
		height: 48px;
	}

	#recharge .rechargewrap .amountitem {
		width: 23%;
		border: 1px solid #060001;
		text-align: center;
		height: 50px;
		line-height: 50px;
		cursor: pointer;
		margin-bottom: 18px;
		font-weight: bold;
		font-size: 22px;
		border-radius: 4px;
	}

	.amountBox {
		margin-bottom: 20px;
	}

	.rechargeamount .itnon {
		border: 1px solid #bc1b21;
		color: #fff;
		background: #bc1b21;
		border-radius: 4px;
		height: 50px;
		/*background: url(../../../static/images/selecticon.png) no-repeat right bottom;*/
		box-sizing: border-box;
	}

	#recharge .rechargewrap .cur {
		border: 1px solid #bc1b21 !important;
		color: #bc1b21;
		background: url(../../../static/images/selecticon.png) no-repeat right bottom;
		background-size: 50px 50px;
	}



	.Popup {
		position: fixed;
		top: 0px;
		/*display: none;*/
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.poushow {
		position: absolute;
		width: 500px;
		height: 400px;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
		margin: auto;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		box-shadow: 0 0 10px #333;
		border-radius: 10px;

	}

	#recharge .poushow>img {
		width: 40%;
	}

	.poushow .titlemssg {
		margin-top: 10px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.poushow .titlemssg img {
		display: block;
		width: 30px;
		margin-right: 10px;
	}

	.poushow span {
		font-size: 20px;
		color: #FF6565;
		margin-top: 10px;
	}

	.poushow samp {
		font-size: 30px;
		color: #000;
		position: absolute;
		top: 10px;
		right: 10px;
	}

	#recharge .el-input--small .el-input__inner {
		height: 50px;
	}
</style>

<style scoped>
	.withdraw-card {
		width: 400px;
		height: 120px;
		background: #FFFFFF;
		box-shadow: 0px 2px 6px 0px rgba(0, 35, 77, 0.1);
		border-radius: 6px;
		position: relative;
		overflow: hidden;
	}

	.withdraw-card::before {
		content: "";
		position: absolute;
		width: 300px;
		height: 300px;
		background: #2C5586;
		border-radius: 50%;
		left: -275px;
		top: 50%;
		transform: translateY(-50%);
	}

	.withdraw-cell {
		display: flex;
		flex-flow: wrap column;
		color: #2C5586;
		height: 100%;
		justify-content: center;
		margin-left: 80px;
	}

	.withdraw-cell span:first-child {
		font-size: 14px;
	}

	.withdraw-cell span:last-child {
		font-size: 32px;
		margin-top: 5px;
		font-weight: 500;
	}

	.row-title {
		margin-top: 40px;
		color: #2c5586;
	}

	.row-title i {
		margin-right: 10px;
	}

	.radio-cell {
		width: 600px;
		display: flex;
		flex-wrap: wrap;

	}

	.radio-child {
		width: 110px;
		display: inline-block;
		margin-top: 15px;
	}

	.radio-cell .el-radio.is-bordered+.el-radio.is-bordered {
		margin-left: 0 !important;
	}

	.user-radio {
		margin-top: 15px;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 30px;
		width: 160px;
	}

	.user-radio-cell .el-radio-group {
		display: flex;
	}

	.pay-btn{
		margin-top: 30px;
	}
</style>